<template>
  <view class="supplier-page">
    <view class="supplier-form-container">
      <view class="supplier-form">
        <!-- 供应商编号 -->
        <view class="form-item">
          <view>供应商编号：</view>
          <view>{{ supplier.id || '无' }}</view>
        </view>

        <!-- 供应商名称 -->
        <view class="form-item">
          <view>供应商名称：</view>
          <uni-easyinput v-model="supplier.name" placeholder="请输入供应商名称" />
        </view>

        <!-- 联系人 -->
        <view class="form-item">
          <view>联系人：</view>
          <uni-easyinput v-model="supplier.contact" placeholder="请输入联系人" />
        </view>

        <!-- 手机号码 -->
        <view class="form-item">
          <view>手机号码：</view>
          <uni-easyinput v-model="supplier.mobile" placeholder="请输入手机号码" />
        </view>

        <!-- 联系电话 -->
        <view class="form-item">
          <view>联系电话：</view>
          <uni-easyinput v-model="supplier.telephone" placeholder="请输入联系电话" />
        </view>

        <!-- 电子邮箱 -->
        <view class="form-item">
          <view>电子邮箱：</view>
          <uni-easyinput v-model="supplier.email" placeholder="请输入电子邮箱" />
        </view>

        <!-- 传真 -->
        <view class="form-item">
          <view>传真：</view>
          <uni-easyinput v-model="supplier.fax" placeholder="请输入传真号码" />
        </view> 
        <!-- 开启状态 -->
        <view class="form-item">
          <view>开启状态：</view>
		  <uni-easyinput v-model="supplier.status" placeholder="请输入状态" />
		  </view>  
        <!-- 纳税人识别号 -->
        <view class="form-item">
          <view>纳税人识别号：</view>
          <uni-easyinput v-model="supplier.taxNo" placeholder="请输入纳税人识别号" />
        </view> 
        <!-- 税率 -->
        <view class="form-item">
          <view>税率：</view>
          <uni-easyinput v-model.number="supplier.taxPercent" placeholder="请输入税率" />
        </view> 
        <!-- 开户行 -->
        <view class="form-item">
          <view>开户行：</view>
          <uni-easyinput v-model="supplier.bankName" placeholder="请输入开户行" />
        </view> 
        <!-- 开户账号 -->
        <view class="form-item">
          <view>开户账号：</view>
          <uni-easyinput v-model="supplier.bankAccount" placeholder="请输入开户账号" />
        </view> 
        <!-- 开户地址 -->
        <view class="form-item">
          <view>开户地址：</view>
          <uni-easyinput v-model="supplier.bankAddress" placeholder="请输入开户地址" />
        </view> 
        <!-- 备注 -->
        <view class="form-item">
          <view>备注：</view>
          <uni-easyinput type="textarea" v-model="supplier.remark" placeholder="请输入备注" />
        </view> 
        <!-- 提交按钮 -->
        <view class="form-item">
          <button type="button" @click="submitForm">{{ isEdit ? '修改' : '新增' }}</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getSupplier, createSupplier, updateSupplier } from "@/sheep/api/erp/supplier.js";

export default {
  data() {
    return {
      supplierId: "", // 从路由参数获取供应商ID
      supplier: {
        id: null,
        name: '',
        contact: '',
        mobile: '',
        telephone: '',
        email: '',
        fax: '',
        status: null,
        taxNo: '',
        taxPercent: null,
        bankName: '',
        bankAccount: '',
        bankAddress: '',
        remark: '',
      }, // 供应商信息
      isEdit: false, // 是否为编辑模式
  // 状态选项
    };
  },
  methods: {
    async fetchSupplierDetails() {
      if (!this.supplierId) return; // 如果没有 supplierId，表示是新增
      try {
        const res = await getSupplier(this.supplierId);
        this.supplier = res.data;
        this.isEdit = true;
      } catch {
        uni.showToast({
          title: "获取供应商详情失败",
          icon: "none"
        });
      }
    },
 
    submitForm() {
      if (this.isEdit) {
        this.updateSupplier();
      } else {
        this.createSupplier();
      }
    },
    createSupplier() {
      createSupplier(this.supplier)
        .then(() => {
          uni.showToast({
            title: "新增成功",
            icon: "success"
          });
          uni.navigateBack();
        })
        .catch(err => {
          uni.showToast({
            title: err.msg || "新增失败",
            icon: "none"
          });
        });
    },
    updateSupplier() {
      updateSupplier(this.supplier)
        .then(() => {
          uni.showToast({
            title: "修改成功",
            icon: "success"
          });
          uni.navigateBack();
        })
        .catch(err => {
          uni.showToast({
            title: err.msg || "修改失败",
            icon: "none"
          });
        });
    },
  },
  onLoad() {
    this.supplierId = uni.getStorageSync('supplierId') || ''; // 确保 supplierId 总是有值
    this.fetchSupplierDetails();
  },
};
</script>

<style scoped>
	/* 样式与之前相同 */
	.order-page {
		padding: 10px;
		background-color: #f5f5f5;
	}

	.order-form-container { 
		/* 为顶部导航栏留出空间 */
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.order-form {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.form-input {
		flex-grow: 1;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
	}

	.pickercustomer {
		flex-grow: 1;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		width: 280px;
	}

	.pickerproduct {
		flex-grow: 1;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		width: 270px;
	}
	.picker-view {
		flex-grow: 1;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		width: 250px;
	}

	.picker {
		flex-grow: 1;
		border: 1px solid #ef5815;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		width: 250px;
	}

	.form-textarea {
		flex-grow: 1;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
	}

	.product-list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.add-product-button {
		background-color: #1aad19;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		height: 20px;
		width: 90px;
		line-height: 20px;
		/* 垂直居中 */
		text-align: center;
	}

	.product-list {
		margin-top: 2px;
	}

	.product-item {
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.product-item-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
		border-bottom: 1px solid #eee;
	}

	.product-item-row:last-child {
		border-bottom: none;
	}

	.delete-button {
		background-color: #ff4d4f;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 12px;
		height: 20px;
		width: 70px;
		line-height: 20px;
		/* 垂直居中 */
		text-align: center;
	}

	.submit-button {
		margin-top: 10px;
		/* padding: 10px 20px; */
		background-color: #1890ff;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		/* height: 20px; */
		width: 300px;
		/* line-height: 20px; */
		/* 垂直居中 */
		text-align: center;
	}
</style>